<template>
    <el-dialog class="ba-operate-dialog" :destroy-on-close="true" :model-value="['prizeRecord'].includes(baTable.form.operate!)" @close="baTable.toggleForm" width="70%" :style="{ height: '90vh',top:'-10vh !important'}">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? '抽奖记录' : '' }}
            </div>
        </template>


        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar" style="height:85vh">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
      
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    label-position="right"
                    :label-width="baTable.form.labelWidth + 'px'"

                >
                    
                    <p style="padding-bottom: 15px;">
                        共计 <font color="#ff0000">{{ sum }}</font> 条记录
                    </p>
                    <table class="table" v-loading="load">
                         <tr>
                             <th style="text-align: left;">奖品</th>
                             <th>抽奖人</th>
                             <th>抽奖时间</th>
                             <th>领取时间</th>
                             <th>是否领取</th>
                         </tr>
                         <tr v-for="(item,index) in data">
                             
                             <td style="text-align: left;">{{ item.prize_title }}</td>
                             <td>{{ item.nickname }}</td>
                             <td>{{ item.time }}</td>
                             <td>{{ item.ling_time }}</td>
                             <td>
                                 <el-tag type="error" v-if="item.status == 0">待领取</el-tag> 
                                 <el-tag type="success" v-if="item.status > 0">已领取</el-tag>
                             </td>
                              
                              
                             
                         </tr>
                       
                         
                    </table>
                </el-form>
            </div>
        </el-scrollbar>
 
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, inject,onMounted,watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import type { ElForm, FormItemRule} from 'element-plus'
import { ElMessage,ElMessageBox} from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import internal from 'stream'
import createAxios from "/@/utils/axios";
const dialogVisible = ref(false)
const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()

const data = ref([])
const sum = ref(0)
const load = ref(false)
watch(
    () => baTable.form.operate!, // 监听operate 以此判断编辑或者新增或其他
    (newVal) => {
        if(newVal == 'prizeRecord'){
            getRecord()
        }
    },
    { deep: true }
)
const getRecord = () => {
    load.value = true
        return createAxios({
            url: '/admin/mk.Wheel/record',
            method: 'get',
            params:{'id':baTable.form.items.id}
        }).then(res => {
                if(res.code == 1){
                    data.value = res.data.lists
                    sum.value = res.data.n
                    load.value = false
                }
        })
}
</script>
<style>
.aa{
   height: 90vh !important;
}
.table{
     border:1px solid #eee;
     width: 100%;
     border-collapse: collapse; /* 合并边框，消除间隙 */
}
.table th{
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;text-align: center;
}
.table td{
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
}
.table tr .bg{
    background-color: #f5f7fa;
    font-weight: bold;
    text-align: justify;
}
h4{
    
    margin-bottom: 10px;
    font-size: 17px;
}
</style>
